<template>

    <div class="Index" v-if="isshow">
        <div class="Index_body">
            <img art="图片暂时加载不出来" :src="imgurl" />
            <div style="font-size: 1.5rem;font-weight:600;margin-top: 1rem;text-align: center;">
                <a href="https://github.com/HYliangkai" ><img :src="githuburl" class="icc"  ></a>

                <a href="https://space.bilibili.com/353486117"><img :src="bilibiliurl" class="icc"></a>
                <a href="https://www.douban.com/people/159522761/?_i=2465646SdqJfyx"><img :src="doubanurl" class="icc"></a>
                <a href="https://weibo.com/"><img :src="weibourl" class="icc" ></a>
            </div>
            <div style="display:flex;justify-content: space-around;align-items: center;margin-top:1.4rem;">
                <router-link v-for="item in categories" :key="item.name" :to="item.path" class="Item_style">
                    <img :src="item.url" style="height:1.7rem;width:1.7rem" />
                    <div>{{ item.name }}</div>
                </router-link>
            </div>
        </div>
    </div>


</template>



<script setup lang="ts">
import githuburl from '../../assets/svg/github.svg?url'
import weibourl from '../../assets/svg/weibo.svg?url'
import doubanurl from '../../assets/svg/douban.svg?url'
import bilibiliurl from '../../assets/svg/bilibili.svg?url'
import imgurl from '../../assets/img/header_left_bg.png?url'
import golangurl from '../../assets/svg/golang.svg?url'
import weburl from '../../assets/svg/web.svg?url'
import otherurl from '../../assets/svg/other.svg?url'
import chaturl from '../../assets/svg/chat.svg?url'
import { storeToRefs } from 'pinia'
import { useCounterStore } from '../../stores/counter'


let categories = ref([{
    path: '/article/go',
    url: golangurl,
    name: 'Golang'
}, {
    path: '/article/web',
    url: weburl,
    name: '前端'
}, {
    path: '/article/other',
    url: otherurl,
    name: '其他'
}, {
    path: '/article/chat',
    url: chaturl,
    name: '闲聊'
}
])
//Flag:组件渲染
let isshow = ref<boolean>(false)
onMounted(() => {
    isshow.value = true
})
//Flag:监听变化
let Store = useCounterStore()
let { Animation } = storeToRefs(Store)
watch(() => { return Animation.value }, () => {
isshow.value=false
})


</script>




<style scoped lang="scss">
.icc{
    cursor: pointer;
    padding-left: 1.4rem;
    padding-right: 1.4rem;
}
.Index {
    display: flex;
    justify-content: center;
    align-items: center;
}

.Index_body {
    display: flex;
    flex-direction: column;
    align-items: center;

    .Item_style {
        &.Item_style:not(:last-child) {
            margin-right: 2rem;
        }

        box-shadow: 0 2px 4px rgb(5 10 15 / 5%),
        0 7px 13px -3px rgb(5 10 15 / 30%);
        border-radius: .5rem
        /* 8px -> .5rem */
        ;
        padding: 1rem;
        display: flex;
        width: 8rem;
        height: 3.5rem;
        align-items: center;
        justify-content: space-around;
        text-decoration: none;
        color: black;
        font-weight: 550;
        font-size: 1.2rem;
    }
}
</style>